<template>
  <div>
    <d-puzzle v-bind="puzzleConfig[level]" :key="level" @nextLevel="goToNextLevel" @imgWHConfirm="imgWHConfirm"/>
  </div>
</template>

<script>
  import DPuzzle from './Puzzle'

  export default {
    components: {
      DPuzzle
    },
    data() {
      return {
        level: 0,
        puzzleConfig: [
          {id:1,row: 2, col: 2, img: './images/1.jpeg'},
          {row: 3, col: 3, img: './images/2.jpeg'},
          {row: 3, col: 3, img: './images/4.jpeg'},
          {row: 2, col: 2, img: './images/5.jpeg'},
          {row: 2, col: 2, img: './images/6.jpg'},
          {row: 3, col: 3, img: './images/3.jpeg'},
        ]
      }
    },
    methods: {
      goToNextLevel() {
        if (++this.level === this.puzzleConfig.length){
          let answerFlag = confirm("恭喜您，已经通过全部关卡，要重新开始嘛？")
          if (answerFlag){
            this.level = 0;
          }
        }
      },
      imgWHConfirm(){
        setTimeout(() => {
          let answerFlag = confirm("检测到该图片宽高不一致，会影响您的游戏体验，是否跳过该关卡？")
          if (answerFlag) {
            this.goToNextLevel();
          }
        },500);
      }
    }
  }
</script>

<style>

</style>